<template>
  <view @touchstart="handlerTouchstart" @touchend="handlerTouchend">
    <slot> </slot>
  </view>
</template>

<script>
/**
 * slot 对外提供数据，滑动的方向
 */
export default {
  data() {
    return {
      // 按下的时间
      startTime: 0,

      // 按下的坐标
      startX: 0,
      startY: 0,
    };
  },

  methods: {
    handlerTouchstart(event) {
      //   console.log("开始触屏" + JSON.stringify(event));
      // console.log("开始触屏X" + event.changedTouches[0].clientX);
      // console.log("开始触屏Y" + event.changedTouches[0].clientY);
      this.startTime = Date.now();
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    handlerTouchend(event) {
      // console.log("结束触屏" + JSON.stringify(event));
      // console.log("结束触屏X" + event.changedTouches[0].clientX);
      // console.log("结束触屏Y" + event.changedTouches[0].clientY);
      const endTime = Date.now();
      const endX = event.changedTouches[0].clientX;
      const endY = event.changedTouches[0].clientY;
      // 如果时长超过两秒，不处理
      if (endTime - this.startTime > 2000) {
        return;
      }
      // 滑动的方向
      let direction = "";

      // 判断距离 先判断用户的滑动距离
      if (Math.abs(endX - this.startX) > 10 &&
      Math.abs(endY - this.startY) < 10) {
        // 滑动的方向
        if (endX - this.startX > 0) {
          direction = "right";
        } else {
          direction = "left";
        }
      }else{
        return;
      }
      
      console.log(direction);
      this.$emit("swiperAction", { direction });
    },
  },
};
</script>

<style>
</style>